<template>
  <div>
    <span
      >这是<span style="fontweight: bolder">{{ brand }}</span
      >手机</span
    >
    <!-- <el-scrollbar> -->
    <ul>
      <li v-for="obj in alldata" :key="obj.id">
        <img
          @click="cli('' + JSON.stringify(obj))"
          :src="[imgUrl + obj.phone_pic]"
          alt=""
        /><br />
        {{ obj.phone_name }}
      </li>
    </ul>
    <!-- </el-scrollbar> -->

    <singlephone :phonedetail="phoneName"></singlephone>
  </div>
</template>

<script>
import singlephone from "../singlephone/singlephone.vue";
import axios from "axios";
export default {
  name: "dataRanking",
  components: {
    singlephone,
  },
  data() {
    return {
      brand: "",
      // brand:this.$route.query.id,
      // 一个品牌所有的手机数据
      alldata: {},
      imgUrl: "http://localhost:8081/",
      phoneName: "",
    };
  },
  // 动态监听，将手机品牌之间的切换能够传输数据
  watch: {
    "$route.query.id": {
      handler: function (val) {
        this.brand = val;
        console.log(val);
        this.$router.go(0);
      },
      deep: true, // 深度检测
    },
  },

  mounted() {
    // 将各品牌和总的切换能够传输数据
    // console.log(this.$route.query.id)
    this.brand = this.$route.query.id;
    let that = this;
    axios({
      method: "get",
      url: "http://localhost:8081/api/brand/phoneInfo",
    }).then((res) => {
      let data = res.data.data;
      let gain = [];

      for (let item of data) {
        if (item.brand == that.brand) {
          gain.push(item);
        }
      }

      that.alldata = gain;
    });
  },
  // 点击相关图片传到子组件
  methods: {
    cli(e) {
      this.phoneName = JSON.parse(e);
    },
  },
};
</script>

<style lang="less" scoped>
div {
  height: 100%;
  // width: 100%;
  background-color: rgb(255, 255, 255);

  ul {
    margin: 0 0;
    padding: 0;
    height: 150px;
    display: flex;
    overflow-x: scroll;

    li {
      margin-left: 20px;
      margin-right: 20px;
      img {
        width: 5rem;
        height: 5rem;
      }
    }
  }
}
</style>
